Fitts's Law and Its Applications in UXFitts 法則及其在使用者體驗設計中的應用

Fitts 法則表明：使用者將指標（如滑鼠遊標或手指）移動到目標的時間取決於目標的大小和與目標的距離。

1. Fitts 菲茨定律法則的定義

Fitts 法則揭示了使用者在操作時將指標移動到某個目標（例如點選按鈕、觸控圖示或抓取物體）時所需的時間與目標大小和距離的關係。其公式如下：

其中：

• T= 移動時間（Time）

• D= 到目標的距離（Distance）

• W= 目標的寬度（Width）

• a 和 b= 常數，取決於指標型別（如滑鼠、手指等）

公式中的“log”表明時間隨著引數的增加而非線性地增長，這意味著如果目標距離加倍，移動時間雖然會增加，但不會整整加倍。這是因為移動過程中速度會先加快、然後減慢。

要點總結：

1. 目標距離越遠，移動時間越長。換句話說，較近的目標更容易被快速點選。

2. 目標越大，移動時間越短。也就是說，大的目標更容易被使用者準確操作。

2. Fitts 法則的兩階段模型

在 Fitts 法則提出之前，R.S. Woodworth 於 19 世紀末提出了人類上肢運動的兩階段模型：

1. 初始快速移動：用於將指標快速移動到目標的大致方向，這一階段主要受到目標距離的影響。

2. 精準調整移動：當接近目標時，速度減慢以確保準確點選目標，這一階段則主要受目標大小的影響。

這意味著在較遠距離移動時，使用者可以快速移動指標，但在接近較小目標時需要更慢、更精準的控制，以防超出目標範圍。

3. Fitts 法則在 UX 設計中的應用

Fitts 法則在 UX 設計中的應用主要圍繞兩個變數展開：目標大小和目標距離。

3.1 最佳化目標大小

目標越大越好：根據 Fitts 法則，較大的目標更易被點選或觸控。因此，在設計按鈕、圖示和其他可點選區域時，應儘量增大目標尺寸。

圖示加上標籤：為圖示新增文字標籤，可以擴大點選區域，讓使用者更容易選中目標區域。這不僅提升了可理解性，還降低了誤點選率。

螢幕邊緣的“無限”目標：在滑鼠驅動的介面中，螢幕邊緣可以看作“無限”目標。因為滑鼠遊標無法超出螢幕邊緣，因此使用者無需減速即可快速選中邊緣的目標區域。

3.2 最佳化目標距離

選單設計：選單項的排列方式影響移動時間。線性選單（如從上到下排列）會使遠端選項更難點選；矩形選單（Mega Menu）則可以同時利用水平和垂直空間，減少平均距離。圓形選單（Pie Menu）則讓每個選項到中心點的距離相等，提升了整體效率。

將相關控制元件放在一起：如果某些控制元件經常被依次點選，應將它們放置在彼此附近（但不要太靠近，以避免誤觸）。例如，表單中的“提交”按鈕應放在最後一個輸入框旁邊，而不是放在頁面頂部，這樣可以減少使用者的手指移動距離。

3.3 避免過於擁擠的佈局

目標彼此靠得太近會導致使用者在點選時容易誤觸，從而降低使用效率。因此，在設計介面時要避免將多個目標緊挨在一起，可以透過適當的留白和邊距來區分目標區域。

3.4 邊緣目標對觸控式螢幕的影響

雖然螢幕邊緣在滑鼠驅動的介面中是“無限”目標，但在觸控式螢幕裝置上情況則不同。研究表明，觸控式螢幕上的邊緣目標可能更難點選，因為使用者的手指可能會滑出螢幕邊界，從而導致誤觸。因此，在觸控式螢幕裝置上，目標放置在邊緣位置可能反而會增加移動時間。

4設計應用案例

作業系統選單設計：macOS 將選單欄放置在螢幕頂部，這是一個利用 Fitts 法則最佳化目標距離的經典案例。使用者可以快速將滑鼠移到螢幕頂部，因其為“無限”目標，使用者無需擔心超出目標範圍。而 Windows 的開始選單也位於螢幕左下角，這樣使用者可以快速定位到常用程式圖示。

移動應用的選單設計：在移動端，如果上下文選單選項離觸發選單的圖示較遠（例如從頂部圖示到底部彈出的選單項），會增加使用者的手指移動時間，因此應儘量將選單選項放置在靠近觸發點的位置。

1.目標儘量做大，尤其是按鈕、圖示等互動元素。

2.將目標放置在使用者預期位置或靠近使用者當前操作位置，減少移動距離。

3.不要將目標放得過於緊密，留出足夠的點選或觸控空間。

應用好 Fitts 法則，將能夠有效降低使用者操作的難度，提升整體使用者體驗。

結論

Fitts 法則揭示了移動到目標的時間取決於目標的大小和與目標的距離。在設計介面時，應綜合考慮這兩個變數，最佳化使用者操作路徑。透過設計更大、更易點選的目標，以及將相關目標放置在更近的位置，可以顯著提升使用者體驗。